<template>
  <div>
    <ry-modal title="会员详情" v-model="visible" destroyOnClose
      :confirmLoading="confirmLoading" :ryfooter="null" width="1000px">
        <div class="table-container">
          <div class="table-page-search-wrapper">
            <!-- 搜索区域 -->
            <a-form-model layout="inline" v-bind="searchModelConfig"
                          @keyup.enter.native="searchQuery">
              <a-row v-bind="searchRowConfig">
                <a-col :span="8">
                  <a-form-model-item label="会员卡名称">
                    <a-input v-model="queryParam.cardName" placeholder="请输入会员卡名称" />
                  </a-form-model-item>
                </a-col>
                <a-col class="table-page-search-submitButtons" v-bind="searchColConfig">
                  <a-button @click="searchQuery" type="primary">搜索</a-button>
                  <a-button @click="queryReset" type="danger">重置</a-button>
                </a-col>
              </a-row>
            </a-form-model>
          </div>
          <div class="table-operator">
            <a-form-model-item>
              <a-button @click="handleAddCard" type="primary" icon="plus">添加会员卡</a-button>
            </a-form-model-item>
          </div>
          <a-row>
            <a-col :span="24">
              <ry-table :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                        :columns="columns" :loading="loading" :data-source="dataSource"
                        :rowKey="record=>record.id" :pagination="ipagination" bordered
                        :scroll="{ x: 'max-content'}">
                <template slot="createTime" slot-scope="{record}">
                  {{record.createTime.substring(0, 10)}}
                </template>
                <template slot="action" slot-scope="{record}">
                  <a-tooltip title="会员信息">
                    <a-button @click="openMemberCardInfo(record)" type="primary" v-has="['memberCardView']">详情</a-button>
                  </a-tooltip>
                  <a-tooltip title="会员卡转让">
                    <a-button @click="transferMemberCard(record)" type="primary" v-has="['memberCardTransfer']">转让</a-button>
                  </a-tooltip>
                  <a-popconfirm
                      title="确认撤销?"
                      @confirm="() => onDeleteCard(record.id)"
                  >
                    <a-button type="danger" v-has="['memberCardRevo']">撤销</a-button>
                  </a-popconfirm>
                </template>
              </ry-table>
            </a-col>
          </a-row>
        </div>
      <AccountMemberCardModel ref="accountMemberCardModel" :account="form"></AccountMemberCardModel>
      <AddMemberCardModel ref="addMemberCardModel" :account="form" @ModalOk="loadData"></AddMemberCardModel>
    </ry-modal>
    <a-modal title="转让会员卡" :visible="visibleTransfer" :maskClosable="false" @cancel="handleApplyProjectCancel"
             @ok="handleApplyProjectOk">
      <a-form-model>
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="转让给" :labelCol="{span:4}" :wrapperCol="{span:12}">
              <ry-select :dataSource="businessAccounts" labelKey="nickname" extraLabel="serialNumber" valueKey="id" :showArrow="false" allowClear
                         v-model="transferAccountId" :open="!!searchText" @search="onSearch" @select="selectAccount"></ry-select>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { RyListMixin } from '@/ryweb'
import AccountMemberCardModel from "./AccountMemberCardModel.vue"
import AddMemberCardModel from "./AddMemberCardModel.vue";
export default {
  mixins: [RyListMixin],
  components: {AccountMemberCardModel, AddMemberCardModel},
  data () {
    return {
      count: 0,
      confirmLoading: false,
      visibleTransfer: false,
      initQuery: false,
      visible: false,
      transferAccountId: '',
      searchText: '',
      queryParam: {},
      recordMemberCard: {},
      businessAccounts: [],
      form: {},
      modelConfig: {
        ref: 'ruleForm',
        labelCol: { span: 6 },
        wrapperCol: { span: 14 }
      },
      url: {
        list: this.$api.permission.accountMemberCards.list,
        transferById: this.$api.permission.accountMemberCards.transfer,
        deleteById: this.$api.permission.accountMemberCards.delete,
        byId: this.$api.permission.accountMemberCards.byId,
      },
      columns: [
        {
          title: '会员卡名称',
          align: 'center',
          dataIndex: 'cardName'
        },
        {
          title: '到期时间',
          align: 'center',
          dataIndex: 'expirationTime'
        },
        {
          title: '购买时间',
          align: 'center',
          dataIndex: 'createTime',
          scopedSlots: { customRender: 'createTime' }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
        },
      ],
    }
  },
  created () {

  },
  computed: {

  },
  watch: {

  },
  methods: {
    open (record) {
      this.form = {...record}
      console.log('AccountMemberCardListModel', this.form)
      this.queryParam = {
        accountId: record.id
      }
      this.visible = true
      this.loadData()
    },
    openMemberCardInfo (record) {
      console.log('AccountMemberCardListModel', record)
      this.$refs.accountMemberCardModel.open(record)
    },
    transferMemberCard (record) {
      this.transferAccountId = ''
      this.businessAccounts = []
      this.recordMemberCard = record
      this.visibleTransfer = true
      this.selectProjects()
    },
    queryReset () {
      this.queryParam = {
        accountId: this.form.id
      }
      this.loadData()
    },
    selectProjects () {
      this.$get(`${this.url.byId}/${this.recordMemberCard.id}`).then(res => {
        if (res.code === 200) {
          this.businessAccounts = res.data.businessAccounts
        }
      })
    },
    onSearch (value) {
      this.searchText = value
      console.log('onSearch', value)
    },
    selectAccount (value) {
      this.searchText = undefined
    },
    handleAddCard () {
      this.$refs.addMemberCardModel.open()
    },
    handleApplyProjectCancel () {
      this.visibleTransfer = false
      this.businessAccounts = []
      this.recordMemberCard = {}
    },
    handleApplyProjectOk () {
      if (this.transferAccountId === '') {
        this.$message.warning('请选择转让人！')
        return
      }
      this.$post(this.url.transferById, {
        accountId: this.transferAccountId,
        id: this.recordMemberCard.id
      }).then(response => {
        if (response.code === 200) {
          this.$message.success('转让成功')
          this.loadData()
        }
      })
      this.handleApplyProjectCancel()
    },
    onDeleteCard (id) {
      this.$postType(this.url.deleteById, {id: id}).then(res => {
        if (res.code === 200) {
          this.$message.success('撤销成功')
          this.loadData()
        }
      })
    }
  },
  mounted () {
  }
}
</script>

<style scoped>
.ry-modal .body-container .ant-form-item {
  margin-bottom: 0.15rem;
}
.editable-add-btn {
  margin-bottom: 8px;
}
.table-container {
  padding: 0px;
}
</style>
<style>
/* 使用更高优先级的选择器覆盖默认宽度 */
body .ry-modal {
  width: 60% !important;
}
</style>
